<template>
<div class="equipmentContainer">
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>方案设备管理</span>
    </div>
    <el-table
      :cell-style="{textAlign:'center'}"
      :data="equipmentData"
      :header-cell-style="{textAlign:'center'}"
      style="width: 100%"
    >
      <el-table-column
        label="图片"
        prop="img"
      >
        <template slot-scope="scope">
          <el-popover placement="right" title="" trigger="click">
            <img :src="scope.row.image"  style="height: 200px;width: 200px"/>
            <img slot="reference" :src="scope.row.image" :alt="scope.row.image" style="height: 50px;width: 50px">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="品牌名称"
        prop="brandName"
      />
      <el-table-column
        label="类目ID"
        prop="categoryId"
      />
      <el-table-column
        label="商品ID"
        prop="goodsId"
      />
      <el-table-column
        label="SKU名称"
        prop="name"
      />
      <el-table-column
        label="优惠金额"
        prop="preMoney"
      />
      <el-table-column
        label="价格"
        prop="price"
      />
      <el-table-column
        label="规格"
        prop="spec"
      />
      <el-table-column
        label="操作"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      style="margin: 20px 0;float: right"
      v-show="queryParams.total>0"
      :total="queryParams.total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getData"
    />
  </el-card>
</div>
</template>

<script>
import {
  addEquipmentList,
  delEquipmentList,
  editEquipmentList,
  getEquipmentList,
  queryEquipmentList
} from "@/api/equipment";

export default {
  name: 'Equipment',
  data(){
    return{
      //分页查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        total:0
      },
      id:"",
      equipmentData:[]
    }
  },
  created() {
    this.getData()
  },
  methods:{
  //  获取方案设备分页数据
    getData(){
      getEquipmentList().then(res=>{
        this.equipmentData=res.data.records
        this.equipmentData.forEach(item=>{
          item.image=item.images?item.images.split(',')[0]:""
        })
        this.queryParams.total=res.data.total
      })
    },
    renderHeader(h) {
      return(
        <div>操作
          <el-button type="success" size='mini'  onClick={()=>this.handleAddItem()} style="margin-left:20px">添加</el-button>
        </div>
      )
    },
  //  添加设备信息
    handleAddItem(){
      this.$router.push('/addEquipment')
    },
    edit(row){
      this.$router.push({
        path:'/editEquipment',
        query:{
          id:row.id
        }
      })
    },
  //  删除设备信息
    del(row){
      const id=row.id
      this.$confirm('您确定删除这条数据么？','提示',{
        confirmButtonText:"确定",
        cancelButtonText:"取消",
        type:"warning"
      }).then(()=>{
        return delEquipmentList(id).then(()=>{
          this.$message.success('删除成功')
          this.getData()
        })
      }).catch(function (){})
    }
  }
}
</script>

<style scoped lang="scss">
.equipmentContainer{
  padding: 20px;
}
</style>
